<template>
  <view class="habits-container">
    <view class="section">
      <view class="section-title">口味偏好</view>
      <view class="preference-grid">
        <view 
          class="preference-item" 
          v-for="taste in tastes" 
          :key="taste.id"
          :class="{ active: taste.selected }"
          @click="toggleTaste(taste)"
        >
          <text>{{ taste.name }}</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">用餐时间</view>
      <view class="meal-times">
        <view class="meal-item">
          <text class="meal-label">早餐</text>
          <picker mode="time" :value="mealTimes.breakfast" @change="updateMealTime('breakfast', $event)">
            <view class="time-picker">{{ mealTimes.breakfast }}</view>
          </picker>
        </view>
        <view class="meal-item">
          <text class="meal-label">午餐</text>
          <picker mode="time" :value="mealTimes.lunch" @change="updateMealTime('lunch', $event)">
            <view class="time-picker">{{ mealTimes.lunch }}</view>
          </picker>
        </view>
        <view class="meal-item">
          <text class="meal-label">晚餐</text>
          <picker mode="time" :value="mealTimes.dinner" @change="updateMealTime('dinner', $event)">
            <view class="time-picker">{{ mealTimes.dinner }}</view>
          </picker>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="section-title">饮食限制</view>
      <view class="restriction-list">
        <view 
          class="restriction-item" 
          v-for="restriction in restrictions" 
          :key="restriction.id"
          @click="toggleRestriction(restriction)"
        >
          <text>{{ restriction.name }}</text>
          <uni-icons 
            :type="restriction.selected ? 'checkbox-filled' : 'circle'" 
            :color="restriction.selected ? '#1890ff' : '#ccc'"
          />
        </view>
      </view>
    </view>

    <button class="save-btn" @click="saveHabits">保存设置</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tastes: [
        { id: 1, name: '清淡', selected: false },
        { id: 2, name: '香辣', selected: true },
        { id: 3, name: '酸甜', selected: false },
        { id: 4, name: '咸鲜', selected: true },
        { id: 5, name: '麻辣', selected: false },
        { id: 6, name: '甜味', selected: false }
      ],
      mealTimes: {
        breakfast: '07:30',
        lunch: '12:00',
        dinner: '18:30'
      },
      restrictions: [
        { id: 1, name: '素食主义', selected: false },
        { id: 2, name: '无辣不欢', selected: false },
        { id: 3, name: '低盐饮食', selected: true },
        { id: 4, name: '无糖饮食', selected: false },
        { id: 5, name: '海鲜过敏', selected: false }
      ]
    }
  },
  methods: {
    toggleTaste(taste) {
      taste.selected = !taste.selected
    },
    
    updateMealTime(meal, event) {
      this.mealTimes[meal] = event.detail.value
    },
    
    toggleRestriction(restriction) {
      restriction.selected = !restriction.selected
    },
    
    saveHabits() {
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.habits-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.section {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.preference-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
}

.preference-item {
  padding: 15rpx 25rpx;
  border: 1rpx solid #ddd;
  border-radius: 25rpx;
  background: #f9f9f9;
  
  &.active {
    background: #1890ff;
    color: white;
    border-color: #1890ff;
  }
}

.meal-times {
  
}

.meal-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.meal-label {
  font-size: 28rpx;
  color: #333;
}

.time-picker {
  color: #1890ff;
  font-size: 28rpx;
}

.restriction-list {
  
}

.restriction-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.save-btn {
  width: 100%;
  height: 80rpx;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 40rpx;
  font-size: 32rpx;
  margin-top: 40rpx;
}
</style>